<template>
  <div class="left left_top left_top_width">
    <div class="left_toptitle">
      <span style="color: #fff;">空气质量现状</span>
      <span style="color: #ffca00;"></span>
    </div>
    <el-select v-model="value" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <div class="left_topcontent">
      <div class="left_topcontent_top" style="position: relative;">
        <p class="left_topcontent_top_text">优</p>
        <div id="main"></div>
        <div class="left_topcontent_top_center">
          <ul>
            <li>
              <span>PM2.5</span>
              <span style="color: #68CB00">14</span>
            </li>
            <li>
              <span>PM10</span>
              <span style="color: #FB890F">31</span>
            </li>
            <li>
              <span>SO2</span>
              <span style="color: #F6E200">13</span>
            </li>
            <li>
              <span>NO2</span>
              <span style="color: #DF2D00">15</span>
            </li>
            <li>
              <span>CO</span>
              <span style="color: #5F0C63">0.2</span>
            </li>
            <li>
              <span>O3</span>
              <span style="color: #5F0C63">107</span>
            </li>
          </ul>
        </div>
        <div class="left_topcontent_top_right">
          <img src="../assets/cart.png" alt />
          <p>健康提示</p>
        </div>
      </div>
      <div class="left_topcontent_bottom">
        <div class="left_topcontent_bottom_left">
          <p>首要污染物：-</p>
          <p>当前省内城市排名第8</p>
          <p>全国城市排名第76</p>
        </div>
        <div class="left_topcontent_bottom_right">
          <p>健康影响情况：空气</p>
          <p>质量属于:优，</p>
          <p>各类人群放心出行</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      value: "沈阳市",
      options: [
        { lable: "沈阳市", value: "沈阳市" },
        { lable: "铁岭市", value: "铁岭市" }
      ]
    };
  },
  mounted() {
    this.piecharts();
  },
  methods: {
    piecharts() {
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        color: ["#5fbd40", "#fff"],
        title: {
          text: 31,
          textStyle: {
            color: "#09b99c",
            fontSize: 12
          },
          subtext: "AQI",
          subtextStyle: {
            color: "#09b99c",
            fontSize: 12
          },
          // itemGap: 20,
          left: "center",
          top: "25%"
        },
        angleAxis: {
          max: 100,
          clockwise: true, // 逆时针
          // 隐藏刻度线
          show: false
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        polar: {
          center: ["50%", "40%"],
          radius: "100%" //图形大小
        },
        series: [
          {
            type: "bar",
            data: [31],
            showBackground: true,
            backgroundStyle: {
              color: "#fff"
            },
            coordinateSystem: "polar",
            roundCap: true,
            barWidth: 5,
            itemStyle: {
              show: false
            }
          },
          {
            name: "外边框",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ["50%", "40%"],
            radius: ["65%", "65%"],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 9,
                name: "",
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: "#5fbd40"
                  }
                }
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style>
* {
  font-size: 0.15rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor:default !important;
}

li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.left {
  width: 4.75rem;
  /* height: 3.5125rem; */
  position: absolute;
  z-index: 999;
  border-radius: 5px;
}
.left_top_width {
  height: 3.82rem;
}
.el-select {
  position: absolute !important;
  width: 1.25rem !important;
  height: 0.4rem !important;
  top: 0.0625rem;
  right: 0.125rem;
  /* z-index: 9999; */
}
.el-input .el-input__inner {
  height: 0.4rem !important;
  line-height: 0.4rem !important;
  padding: 0 !important;
}
.el-input__icon {
  height: 0.4rem !important;
  line-height: 0.4rem !important;
}
.left_top {
  /* position: relative; */
  top: 0.25rem;
  left: 0.125rem;
  box-shadow: 0px 2px 4px 2px rgba(142, 155, 176, 0.5);
  border-radius: 6px;
  overflow: hidden;
}

.left_center {
  top: 4.2rem;
  left: 0.125rem;
  box-shadow: 0px 2px 4px 2px rgba(142, 155, 176, 0.5);
  border-radius: 6px;
  overflow: hidden;
}

.left_bottom {
  top: 7.659rem;
  left: 0.125rem;
  box-shadow: 0px 2px 4px 2px rgba(142, 155, 176, 0.5);
  border-radius: 6px;
  overflow: hidden;
}

.left_top .el-input__inner, .left_center .el-input__inner{
  font-size: 0.15rem;
  padding-left: 0.1rem !important;
  color: #666666;
}
.left_top .el-select__caret, .left_center .el-select__caret{
  font-size: 12px;
}
.left_top .el-input__icon, .left_center .el-input__icon{
  width: 14px;
  color: #1890FF !important;
}

.left_toptitle {
  height: 0.525rem;
  width: 100%;
  background: linear-gradient(270deg, #5DAEEC 0%, #1684E1 100%);
  border-radius: 6px 6px 0 0;
  display: flex;
}

.left_toptitle span {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  padding-left: 5px;
  font-size: 0.2rem;
  /* justify-content: center; */
}

.left_topcontent {
  background-color: #fff;
  width: 100%;
  height: 3rem;
}

.left_topcontent_top {
  height: 2.0625rem;
  display: flex;
}

.left_topcontent_top_text {
  width: 0.75rem;
  height: 0.3125rem;
  border-radius: 20px;
  background-color: #5fbd40;
  color: #fff;
  font-size: 0.175rem;
  position: absolute;
  text-align: center;
  line-height: 0.3125rem;
  bottom: 0px;
  left: 0.4375rem;
  z-index: 9999;
}

.left_topcontent_top div {
  display: inline-block;
  flex: 1;
}

.left_topcontent_top_center {
  /* height: 100%; */
  padding-top: 0.25rem;
}

.left_topcontent_top_center span {
  margin-right: 0.125rem;
  width: 0.5rem;
  display: inline-block;
}

.left_topcontent_top_center li {
  margin-bottom: 0.0275rem;
}

.left_topcontent_top_center li span:last-child {
  text-align: left;
  padding-left: 10px;
}

.left_topcontent_top_right {
  height: 100%;
}

.left_topcontent_top_right {
  padding-top: 0.25rem;
}

.left_topcontent_top_right img {
  width: 60%;
  margin: 0 auto;
  display: block;
}

.left_topcontent_top_right p {
  color: #59aaeb;
  text-align: center;
  margin-top: 0.1875rem;
}

.left_topcontent_bottom {
  display: flex;
  justify-content: space-between;
  /* height: 1.5rem; */
  background-color: #fff;
  padding-bottom: .0625rem;
}
#main {
  width:1.875rem;
  height:1.875rem;
}
/* .left_topcontent_bottom div:first-child {
    margin-right: 1rem;
} */
.left_topcontent_bottom p {
  font-size: 0.15rem;
  color: #333333;
  margin-bottom: 0.0375rem;
}

.left_topcontent_bottom_left {
  padding-left: 0.25rem;
  padding-top: 0.1875rem;
}

.left_topcontent_bottom_right {
  padding-top: 0.1875rem;
  padding-right: 0.125rem;
}
</style>
